<template>
  <div class="daiban">
    <!-- 红冲核销 -->
    <div class="daiban_HC">
     <div class="daiban_HC1">
        <span class="daiban_HC1_1">红冲核销</span>
        <span class="daiban_HC1_2">（销售用户仅看到个人的记录，商业财务用户可见所有记录）</span>
      </div>
      <div class="liebiao">
       <div class="liebiao_shu" v-for="(item,index) in 4" :key="index">
          <div class="icon_liebiao icon_liebiao1 iconfont icon-18-yinzhang" v-if="index==0"></div>
          <div class="icon_liebiao icon_liebiao2 iconfont icon-hetong1" v-else-if="index==1"></div>
          <div class="icon_liebiao icon_liebiao3 iconfont icon-zhiyuanfanhui10" v-else-if="index==2"></div>
          <div class="icon_liebiao icon_liebiao4 iconfont icon-shangwutubiao-" v-else></div>
          <div class="liebiao_shu1">
            <span>待审批</span>
            <span>24</span>
          </div>
        </div>
      </div>
    </div>

    <!-- PO核销 -->
    <div class="daiban_HC">
      <div class="daiban_HC1">
        <span class="daiban_HC1_1">PO核销</span>
        <span class="daiban_HC1_2">（销售用户仅看到个人的记录，商业财务用户可见所有记录）</span>
      </div>
      <div class="liebiao">
        <div class="liebiao_shu" v-for="(item,index) in 4" :key="index">
          <div class="icon_liebiao icon_liebiao1 iconfont icon-18-yinzhang" v-if="index==0"></div>
          <div class="icon_liebiao icon_liebiao2 iconfont icon-hetong1" v-else-if="index==1"></div>
          <div class="icon_liebiao icon_liebiao3 iconfont icon-zhiyuanfanhui10" v-else-if="index==2"></div>
          <div class="icon_liebiao icon_liebiao4 iconfont icon-shangwutubiao-" v-else></div>
          <div class="liebiao_shu1">
            <span>待审批</span>
            <span>24</span>
          </div>
        </div>
      </div>
    </div>

    <!-- 合同核销 -->
    <div class="daiban_HC">
      <div class="daiban_HC1">
        <span class="daiban_HC1_1">合同核销</span>
        <span class="daiban_HC1_2">（销售用户仅看到个人的记录，商业财务用户可见所有记录）</span>
      </div>
      <div class="liebiao">
        <div class="liebiao_shu" v-for="(item,index) in 4" :key="index">
          <div class="icon_liebiao icon_liebiao1 iconfont icon-18-yinzhang" v-if="index==0"></div>
          <div class="icon_liebiao icon_liebiao2 iconfont icon-hetong1" v-else-if="index==1"></div>
          <div class="icon_liebiao icon_liebiao3 iconfont icon-zhiyuanfanhui10" v-else-if="index==2"></div>
          <div class="icon_liebiao icon_liebiao4 iconfont icon-shangwutubiao-" v-else></div>
          <div class="liebiao_shu1">
            <span>待审批</span>
            <span>24</span>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  export default{
    name:'daibanZX',
    data(){
      return{

      }
    }
  }
</script>

<style scoped="scoped" lang="scss">
  .daiban{
    // border: 1px solid red;
  }
  .daiban{
    padding: 0.5rem 0.6rem;
    box-sizing: border-box;

    .daiban_HC{
      margin-bottom: 0.6rem;
      .daiban_HC1{

        .daiban_HC1_1{
          color: #333;
          font-size: 0.28rem;
          font-weight: bold;
          float: left;
          margin-bottom: 0.1rem;
        }
        .daiban_HC1_2{
          float: left;
          color: #999;
          font-size: 0.18rem;
        }
      }
      .daiban_HC1::after{
        content: "";
        display: block;
        clear: both;
      }
      .liebiao{
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-top: 0.3rem;

        display: grid;
        grid-gap: 0.4rem 0.7rem;//列行间距
        grid-template-columns: repeat(auto-fit, minmax(3rem, 1fr));

        .liebiao_shu{
          background: #FFFFFF;
          box-shadow: 0px 0.3rem 0.3rem 0.1rem rgba(0, 0, 0, 0.05);
          border-radius: 0.2rem;
          padding: 0.4rem 0.36rem;
          box-sizing: border-box;
          display: flex;
          align-items: center;
          justify-content: center;
          cursor: pointer;
          transition:transform 0.4s ease ;

          .icon_liebiao{
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 0.8rem;
            border-radius: 50%;
            padding: 0.26rem 0.28rem;
          }
          .icon_liebiao1{
            color: #FF5E5E;
            background-color: rgba(255, 94, 94, 0.2);
          }
          .icon_liebiao2{
            color: #17DCCB;
            background-color: #DCFAF8;
          }
          .icon_liebiao3{
            color: #386AFF;
            background-color: #E8EDFF;
          }
          .icon_liebiao4{
            color: #FEBB38;
            background-color: #FFF5DA;
          }
          .liebiao_shu1{
            display: flex;
            flex-direction: column;
            margin-left: 0.3rem;

            span:first-child{
              font-size: 0.18rem;
              color: #999;
            }
            span:last-child{
              color: #333;
              font-size: 0.45rem;
            }
          }
        }
        .liebiao_shu:hover{
          transform: scale(1.1);
          box-shadow: 0px 0.3rem 0.3rem 0.1rem rgba(0, 0, 0, 0.1);
        }
      }
    }
  }
</style>
